<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>随鼠标滚动的广告图片</title>
        <style type="text/css">
            #main { text-align: center; width: 1014px; margin: 0 auto; }
            #adver { position: absolute; left: 10px; top: 30px; z-index: 2; }
        </style>
    </head>
    <body>
        <div id="adver"><img src="images/adv.jpg" /></div>
        <div id="main"><img src="images/main1.jpg" /><img src="images/main2.jpg" /><img src="images/main3.jpg" /></div>
        <script src="js/jquery-1.12.4.js"></script>
        <script>
            $(document).ready(function() {
                var adverTop = parseInt($("#adver").css("top"));
                var adverLeft = parseInt($("#adver").css("left"));
                $(window).scroll(function() {
                    var scrollTop = parseInt($(this).scrollTop()); //获取滚动条翻上去的距离
                    var scrollLeft = parseInt($(this).scrollLeft()); //获取滚动条向右的距离
                    $("#adver").offset({
                        top: scrollTop + adverTop
                    });
                    $("#adver").offset({
                        left: scrollLeft + adverLeft
                    });
                });
            })
        </script>
    </body>
</html>